<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm" :rules="rules" ref="dialogForm" :label-width="formLabelWidth">
		<el-card class="box-card">
		  <div slot="header" class="clearfix">
		    <span style="line-height: 30px;">上游供应商信息</span>
		  </div>
		  <div  class="text item">
		  	    <el-form-item label="订单号"  >
			      <el-input  v-model="dialogForm.carOrder.orderNumber" auto-complete="off" disabled ></el-input>
			    </el-form-item>
			  	<el-form-item label="供应商名称"   >
			      <el-input v-model="dialogForm.carOrder.supplierName" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="汽车车型"   >
			      <el-input :value="dialogForm.carOrder.carBrand + dialogForm.carOrder.carName" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="提车地址(启运地)"  >
			      <el-input :value="dialogForm.carOrder.supplierProvince + dialogForm.carOrder.supplierCity + dialogForm.carOrder.supplierAddress" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="提车联系人"  >
			      <el-input v-model="dialogForm.carOrder.supplierPerson" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="联系人手机号"  >
			      <el-input v-model="dialogForm.carOrder.supplierPhone" auto-complete="off" disabled></el-input>
			    </el-form-item>
			</div>
		</el-card>
		<el-card class="box-card" style="margin-top:15px;">
		  <div slot="header" class="clearfix">
		    <span style="line-height: 30px;">物流信息</span>
		  </div>
		  <div  class="text item">
			  	<el-form-item label="物流公司"  prop="logisticCompanyId" >
			      <el-select v-model.number="dialogForm.logisticCompanyId" placeholder="请选择物流公司" :disabled="!dialogSendData.isAdd">
				    <el-option
				      v-for="item in logisticsCompanyList"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				  </el-select>
			    </el-form-item>
			    <el-form-item label="验车司机信息"  prop="driverInfo">
			      <el-input type="textarea" :rows=3 v-model="dialogForm.driverInfo" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="200"></el-input>
			    </el-form-item>
			    <el-form-item label="目的地省市县(区)"   class="v-distpicker-width" prop="provinceNid">
				    <countySelect v-if="dialogForm.provinceNid"  :provinceNid="dialogForm.provinceNid" :cityNid="dialogForm.cityNid" :countyNid="dialogForm.countyNid"  :isDisabled="!dialogSendData.isAdd" v-on:receive-city-data="receiveCityData" ></countySelect>
			    </el-form-item>
			    <el-form-item label="目的地"  prop="destination">
			      <el-input  v-model="dialogForm.destination" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="30"></el-input>
			    </el-form-item>
			    <el-form-item label="物流费"  prop="logisticsFee" class="currency">
			      <el-input   v-model="dialogForm.logisticsFee" @blur="FormatTwo('basicFee')" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="11"></el-input>
			      <span class="convertCurrency">{{dialogForm.logisticsFee|convertCurrency}}</span>
			    </el-form-item>
			    <el-form-item label="放空费"  prop="basicFee" class="currency">
			      <el-input   v-model="dialogForm.basicFee" @blur="FormatTwo('basicFee')" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="11"></el-input>
			      <span class="convertCurrency">{{dialogForm.basicFee|convertCurrency}}</span>
			    </el-form-item>
			    <el-form-item label="预计验车时间(小时)"  prop="estimatedInspectTime">
			      <el-input v-model="dialogForm.estimatedInspectTime" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="30"></el-input>
			    </el-form-item>
			    <el-form-item label="预计运输时间(天)"  prop="estimeatedDays">
			      <el-input type="text" v-model="dialogForm.estimeatedDays" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="30"></el-input>
			    </el-form-item>
			    <el-form-item label="公里数"  prop="mileage">
			      <el-input type="number" v-model.number="dialogForm.mileage" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="11"></el-input>
			    </el-form-item>
			</div>
		</el-card>
		<el-card class="box-card" style="margin-top:15px;">
		  <div slot="header" class="clearfix">
		    <span style="line-height: 30px;">确认备注</span>
		  </div>
		  <div  class="text item">
		  	<el-form-item label="确认备注"  prop="comment">
		      <el-input type="textarea" :rows=3 v-model="dialogForm.comment" auto-complete="off" disabled></el-input>
		    </el-form-item>
		  </div>
		</el-card>
		<div style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
		</el-form>
	</div>
</template>
<script>
    import agentHttp from '@/utils/agentHttp.js'
    import {require,prop,decimalTwo} from '@/utils/rules.js'
    import countySelect from '@/views/countySelect/index.vue'
	export default{
		created(){
   			if(this.dialogSendData.id!==""){//修改
	      		this.selectData();	      		      	    
	      	}
        },
        components:{countySelect},//countySelect1
		props:['dialogSendData','tableData','logisticsCompanyList'],
		data(){		
		    var checkMileage = (rule, value, callback) => {
		        if (value==""||!value) {
		          return callback();
		        }else if(!/^([0-9]{0,10})(?:\.\d{1,3})?$/.test(value)){
					callback(new Error('请输入最多三位小数的非负数'));
				}else {
			      callback();
			    }
			}	
			return{
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{
		        	estimeatedDays:"",
		        	carOrder:"",
		        	logisticsCompany:"",
		        	provinceNid:"",
		        	cityNid:"",
		        	countyNid:"",
		        	logisticsFee:"",
		        	basicFee:""

		        },
		        rules: {		
		            destination:[require("目的地")],
					logisticCompanyId: [require("物流公司",{type:"number"})],
					driverInfo:[require("验车司机信息")],
					logisticsFee:[require("物流费"),{ validator: decimalTwo, trigger: "blur"}],
					basicFee:[require("放空费"),{ validator: decimalTwo, trigger: "blur"}],
					estimatedInspectTime:[require("预计验车时间")],
					estimeatedDays: [require("预计运输时间")],
					mileage: [{required:false},{ validator: checkMileage, trigger: "blur", type:"number"}],//trigger:"blur",message:"公里数为数字"
					provinceNid: [require("省市区",{type:"number",trigger:"change"})]			
		        },
		        provinceList:"",
		        cityList:"",
		        countyList:"",
		        cityReload:false,
		        countyReload:false
			}
		},
		methods:{
			receiveCityData(province,city,county){ //依次为 省：{id:"",name:""}   市:{id:"",name:""}  区:{id:"",name:""}
				this.dialogForm.provinceNid=province.id;
				this.dialogForm.cityNid=city.id;
				this.dialogForm.countyNid=county.id;	
			},
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			//提交
			submitConfirmForm(formName){				
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.id===""){
		          		//添加
		          	}else{		          		
		          		this.editData();//修改
		          	}		          	
		          } else {
		          	this.$nextTick(()=>{
		          	this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);
		            return false;
		            })
		          }
		        });
			},
			//初始化数据
		    selectData(){
		        agentHttp.get('adminApi/admin/logistics_info/view/'+this.dialogSendData.id).then((data)=>{	
		            if(data.success){
		            	this.dialogForm=data.data;
		            	this.$nextTick(()=>{
		            		this.dialogForm.logisticsFee=(this.dialogForm.logisticsFee-0).toFixed(2);
			            	this.dialogForm.basicFee=(this.dialogForm.basicFee-0).toFixed(2);
			                
		            	})
		            }
		        }) 
		    },
		    //修改提交
		    editData(){
		    	if(!this.dialogForm.provinceNid){
		    		this.$message.warning("目的地省不能为空");
		    		return;
		    	}
		    	if(!this.dialogForm.cityNid){
		    		this.$message.warning("目的地市不能为空");
		    		return;
		    	}
		        agentHttp.putJson('adminApi/admin/logistics_info/update',this.dialogForm).then((data)=>{
		            if(data.success){
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500)  
		            	this.$emit('refreshSeachData',null);
		            	this.$message.success(data.data||"修改成功");		            	
		            } 
		        }) 
		    },
		    FormatTwo(val){
                this.dialogForm[val] = (this.dialogForm[val]-0).toFixed(2);
		    }

		}
	};	
</script>